<template>
  <el-card shadow="always">
    <div class="hander-box">
      <div class="left">
        <el-icon v-if="isFold" @click="changeIsFold(false)"><Fold /></el-icon>
        <el-icon v-else @click="changeIsFold(true)"><Expand /></el-icon>
        <h3>企业门户网站管理系统</h3>
      </div>
      <div class="right">
        <span>欢迎 admin 回来 </span>
        <!-- 下拉弹出层 -->
        <el-popover placement="top-start" :width="150" trigger="hover">
          <template #reference>
            <el-icon><User /></el-icon>
            <el-icon><Expand /></el-icon>
          </template>
          <div class="pull-down">
            <span @click="router.push('/center')">个人中心</span>
            <span @click="outLogin()">退出登录</span>
          </div>
        </el-popover>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { Fold, User, Expand } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import localCahe from "@/utils/cache";
const store = useStore();
const router = useRouter();
// 菜单折叠状态
let isFold = ref(false);
// 改变菜单折叠的状态
const changeIsFold = (bool) => {
  isFold.value = bool;
  store.commit("changeFoldMenus", bool);
};
// 退出登录
const outLogin = () => {
  // 清除全部本地缓存
  localCahe.removeAll();
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.hander-box {
  display: flex;
  justify-content: space-between;
}
.left,
.right {
  display: flex;
  align-items: center;
}
.left .el-icon {
  cursor: pointer;
}

.right span {
  margin-right: 6px;
}

h3 {
  margin-left: 6px;
}

// 下拉弹出层
.el-popover {
  padding: 0;
}

.pull-down {
  span {
    display: block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;

    &:hover {
      background: #f5f7fa;
    }
  }
}
</style>
